<template>
  <el-config-provider :locale="zhCn">
    <div class="app-container">
      <el-container>
        <el-header height="60px">
          <div class="header-container">
            <div class="logo">
              <h1>ERAT 实验报告分析工具</h1>
            </div>
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              router
              @select="handleSelect"
            >
              <el-menu-item index="/">首页</el-menu-item>
              <el-sub-menu index="class">
                <template #title>班级管理</template>
                <el-menu-item index="/class/list">班级列表</el-menu-item>
                <el-menu-item index="/class/add">添加班级</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="course">
                <template #title>课程管理</template>
                <el-menu-item index="/course/list">课程列表</el-menu-item>
                <el-menu-item index="/course/add">添加课程</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="report">
                <template #title>实验报告分析</template>
                <el-menu-item index="/report/experiment">实验维度统计</el-menu-item>
                <el-menu-item index="/report/student">学生维度统计</el-menu-item>
                <el-menu-item index="/report/visualization">可视化分析</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="/student">学生名单管理</el-menu-item>
            </el-menu>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
        <el-footer height="40px">
          <div class="footer-container">
            <p>© 2025 ERAT 实验报告分析工具 - 基于 Attribute-Driven Development 设计方法</p>
          </div>
        </el-footer>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

export default {
  name: 'App',
  setup() {
    const route = useRoute()
    const activeIndex = ref('/')

    // 根据当前路由设置活动菜单项
    const updateActiveIndex = () => {
      const path = route.path
      if (path === '/') {
        activeIndex.value = '/'
      } else if (path.startsWith('/class')) {
        activeIndex.value = 'class'
      } else if (path.startsWith('/course')) {
        activeIndex.value = 'course'
      } else if (path.startsWith('/report')) {
        activeIndex.value = 'report'
      } else if (path.startsWith('/student')) {
        activeIndex.value = '/student'
      }
    }

    // 菜单选择处理
    const handleSelect = (key) => {
      activeIndex.value = key
    }

    // 全局错误处理
    window.onerror = (message, source, lineno, colno, error) => {
      ElMessage.error(`发生错误: ${message}`)
      console.error('全局错误:', { message, source, lineno, colno, error })
      return true
    }

    return {
      activeIndex,
      handleSelect,
      updateActiveIndex,
      zhCn
    }
  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

#app {
  height: 100vh;
}

.app-container {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-header {
  background-color: #fff;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
  padding: 0;
}

.header-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.logo {
  margin-right: 40px;
}

.logo h1 {
  margin: 0;
  font-size: 20px;
  color: #409EFF;
}

.el-main {
  background-color: #f5f7fa;
  padding: 20px;
  overflow-y: auto;
}

.el-footer {
  background-color: #fff;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.footer-container {
  text-align: center;
}

.footer-container p {
  margin: 0;
  font-size: 12px;
}
</style>
